<template>

  <h1>{{count}}</h1>
  <button @click="count++">点我+1</button>

  <h1>书名: {{book.name}}</h1>
  <button @click="changeBookName">点我修改书名</button>


</template>

<script>

	import {ref, reactive, watch} from 'vue'

	export default {
		name: 'App_watch函数的使用',
		components: {},
		setup() {
			let count = ref(1);

			let book = reactive({
				name: 'js编程',
				price: 50
			});

			const changeBookName = () => {
				book.name = "c#";
			};

			/* 监听普通类型响应式数据 */
			watch(count, (newValue, oldValue) => {
				console.log(newValue, oldValue)
			});

			/* 监听响应式对象 */
			watch(() => book.name, () => {
				console.log("书名被修改了");
			});

			/* 监听多个数据执行相同的方法 */
      watch([() => book.name, count], ([name, count], [oldName, oldCount]) => {
        console.log("新值:%s, %s", name, count);
        console.log("旧值:%s, %s", oldName, oldCount);
      });

			return {
				count,
				book,
				changeBookName
			}
		}
	}
</script>

<style>

</style>
